
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>΢��С���򿪷� - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>΢��С���򿪷� - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">在小程序中，WXML、WXSS 和 JS 分别扮演什么角色，它们与传统网页编程中的技术有何对应关系？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">WXML 扮演类似 HTML 的角色，用于描述页面结构；WXSS 具有 CSS 的大部分特性，用于描述页面样式；JS 用于处理页面和用户的逻辑交互。这三者共同构成了小程序的页面结构，类似于网页编程中的 HTML + CSS + JS 组合。</div>
          </div>
          <div class="card-source">来源: 小程序代码结构 > WXML 模板 & WXSS 样式 & JS 逻辑交互</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">配置</div>
          <div class="card-question">小程序根目录下的 `app.json` 文件主要作用是什么？请列举至少三个核心配置项。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">配置</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`app.json` 文件用于对微信小程序进行全局配置。核心配置项包括：`pages` (指定小程序由哪些页面组成)、`window` (设置小程序的状态栏、导航条、标题等)、`tabBar` (配置底部或顶部 tab 栏)以及 `entryPagePath` (指定小程序的默认启动路径)。</div>
          </div>
          <div class="card-source">来源: 全局配置</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">小程序的页面配置和全局配置存在优先级关系吗？如果存在，是如何体现的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">是的，存在优先级关系。每一个小程序页面都可以使用自己的 `.json` 文件来对本页面的窗口表现进行配置。当页面中的配置项与全局 `app.json` 的 `window` 中的配置项相同时，当前页面的配置会覆盖全局配置。</div>
          </div>
          <div class="card-source">来源: 页面配置</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">小程序的 `App()` 函数中，`onLaunch` 和 `onShow` 这两个生命周期函数有何区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`onLaunch` 是在小程序初始化完成时触发，并且全局只触发一次。而 `onShow` 是在小程序启动或从后台进入前台显示时触发，每次小程序显示在屏幕上时都会被调用。</div>
          </div>
          <div class="card-source">来源: 小程序生命周期</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在小程序中，`wx:if` 和 `hidden` 都可以用来控制组件的显示和隐藏，它们在使用场景和性能消耗上有何主要区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要区别在于渲染机制和消耗。`wx:if` 是惰性的，条件为 false 时组件不会被渲染，切换时有销毁或重新渲染的过程，因此切换消耗较高。而 `hidden` 只是简单控制显示与隐藏，组件始终会被渲染，因此初始渲染消耗较高。频繁切换的场景用 `hidden` 更好，运行时条件不常改变的场景则 `wx:if` 更好。</div>
          </div>
          <div class="card-source">来源: 条件渲染 > hidden</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在 `wx:for` 列表渲染中，`wx:key` 属性的作用是什么？在什么情况下必须使用它？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`wx:key` 用于指定列表中项目的唯一标识符。如果列表中的项目位置会动态改变或有新项目添加，并且希望项目保持自身的状态（如 `input` 的输入内容），就需要使用 `wx:key`。它能帮助框架更高效地对列表进行重新排序而不是重新创建，从而提升渲染效率并保持组件状态。</div>
          </div>
          <div class="card-source">来源: 列表渲染 > wx:key</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">小程序的事件分为哪两种类型？如何通过事件绑定语法来区分它们以控制事件的传递？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">事件分为冒泡事件和非冒泡事件。以 `bind` 开头的事件（如 `bindtap`）是冒泡事件，当事件触发后会向父节点传递。以 `catch` 开头的事件（如 `catchtap`）是非冒泡事件，事件被触发后不会向父节点传递。</div>
          </div>
          <div class="card-source">来源: 事件绑定 > 事件分类</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如何在小程序组件中附加自定义数据，并在事件处理函数中获取到这些数据？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以在组件节点上使用以 `data-` 开头的属性来附加自定义数据。在事件处理函数中，可以通过事件对象 `event.currentTarget.dataset` 来获取这些自定义数据。例如，`data-element-type` 属性的值可以通过 `event.currentTarget.dataset.elementType` 获取。</div>
          </div>
          <div class="card-source">来源: 事件绑定 > dataset</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">WXSS 中的尺寸单位 `rpx` 是什么？它与普通像素（px）有何关系？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`rpx` (responsive pixel) 是一种可以根据屏幕宽度进行自适应的尺寸单位。WXSS 规定屏幕宽度为 750rpx。例如，在 375px 宽的 iPhone6 屏幕上，750rpx 等于 375px，即 1rpx 等于 0.5px。</div>
          </div>
          <div class="card-source">来源: WXSS > 尺寸单位</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
